<template>
	<div
		style="background-color:rgb(237,237,237);width: 100%;height: 100vh;text-align: left;--van-nav-bar-background:rgb(237,237,237);font-family:'SourceHanSans','Robot';">
		<van-nav-bar>
			<template #title>
				<strong style="font-family:'SourceHanSans-Bold'">
					充值
				</strong>

			</template>
		</van-nav-bar>

		<div>
			<table style="margin-top: 2rem;margin-bottom: 2rem;">
				<tr>
					<td style="text-align: center;">
						<div style="margin-left: 5vw;margin-right: 5vw;font-family:'SourceHanSans';">充值方式</div>
					</td>
					<td style="line-height: 1rem;">
						<!-- <van-icon name="circle" /> -->
						<van-image width="1rem" height="1rem" fit="contain" :src="logoSrc" />
					</td>
					<td style="font-family:'SourceHanSans-Bold'">帮帮银行 (8848)</td>
					<td style="color: gray;text-align: right;"><van-icon name="arrow" /></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>
						<div style="color: gray;margin-right: 7vw;">单日交易限额 &yen; 50000.00</div>
					</td>

				</tr>
			</table>
		</div>
		<div class="recharge">
			<div style="padding:2vw">
				<div>充值金额
				</div>
				<div style="font-size: 2rem;margin-top: 0.5rem;font-family:'SourceHanSans-Bold';">
					<table>
						<tr>
							<td style="display: inline-block;">
								<div style="padding-top: 0.4rem;">
									&yen;
								</div>
							</td>
							<td>
								<input type="text " :value="moneyShow" :focused="showKeyboard"
									@focus="showKeyboard = true"
									style="border: none;width: 80%;margin-left: 2vh;font-size:3rem;">
							</td>
						</tr>
					</table>
					<van-divider />
				</div>
			</div>
		</div>
		<div style="--van-number-keyboard-button-background:rgb(5,193,96)">
			<van-number-keyboard style="padding: 0;" :show="keyBoardShow" theme="custom" extra-key="."
				close-button-text="确定" @blur="keyBoardShow = true" @input="keyBoardInput" @delete="keyBoardDelete" @close="chargeButtonHandler" />
		</div>

	</div>
</template>

<script>
	import {
		showNotify,
		showLoadingToast 
	} from 'vant';
	import url from '@/assets/url.json';
	import {
		ref
	} from 'vue';

	export default {
		props: {
			uid: String,
			close: Function
		},

		setup() {
			const value = ref('');
			const password = ref('');
			const showKeyboard = ref(true);
			return {
				value,
				password,
				showKeyboard,

			};
		},
		components: {},
		data() {
			return {
				logoSrc: require('@/assets/logo_16.png'),
				keyBoardShow: true,
				moneyShow: '',
				moneyInt: [],
				hadPoint: false,
				moneyDec: []
			}
		},
		methods: {
			keyBoardInput(inp) {
				if (inp === '.') {
					if (this.hadPoint) {
						return false;
					}
					this.hadPoint = true;
					this.changeMoneyArrayToStr();
					return;
				}
				if (!this.hadPoint) {
					if (this.moneyInt.length < 5) {
						this.moneyInt.push(inp);
						this.changeMoneyArrayToStr();
						return;
					}
				} else {
					if (this.moneyDec.length < 2) {
						this.moneyDec.push(inp);
						this.changeMoneyArrayToStr();
						return;
					}
				}

			},
			keyBoardDelete() {
				if (this.hadPoint) {
					if (this.moneyDec.length <= 0) {
						this.hadPoint = false;
						this.changeMoneyArrayToStr();
						return;
					} else {
						this.changeMoneyArrayToStr(this.moneyDec.pop());
						return;
					}
				} else {
					if (this.moneyInt.length >= 0) {
						this.changeMoneyArrayToStr(this.moneyInt.pop());
					}
				}
			},
			changeMoneyArrayToStr() {
				let c = '';
				for (let n of this.moneyInt) {
					c += n;
				}
				if (this.hadPoint) {
					c += '.';
				}
				for (let n of this.moneyDec) {
					c += n;
				}
				this.moneyShow = c;
			},
			chargeButtonHandler() {
				let toast = showLoadingToast({
					message: '加载中...',
					forbidClick: true,
				});
				setTimeout(() => {
					this.charge(toast);
				}, 1000)
			},

			charge(toast) {
				let c = '';
				for (let n of this.moneyInt) {
					c += n;
				}
				while(this.moneyDec.length<2){
					this.moneyDec.push(0)
				}
				for (let n of this.moneyDec) {
					c += n;
				}
				this.$axios({
					url: url.ip + '/api-user' + '/user/addMoney',
					method: 'PUT',
					data: {
						id: this.uid,
						money: c
					},
					headers: {
						token: this.$cookies.get('token'),
					}
				}).then((res) => {
					if (res.data.code !== 0) {
						console.log(res);
						showNotify({
							type: 'danger',
							message: res.data.message
						});
					} else {
						showNotify({
							type: 'success',
							message: '充值成功'
						});
						toast.close();
						this.close();
					}
				}).catch((err) => {
					console.log(err);
					showNotify({
						type: 'danger',
						message: "网络错误或用户未登录"
					});
				})
			}
		}
	};
</script>

<style>
	.recharge {
		width: 92vw;
		background-color: #fff;
		height: 50vh;
		border-radius: 4vw;
		padding: 8vw 4vw;
	}
</style>